在開始了解設計系統Design System前,可以透過這三種方式來檢視目前的設計流程:
1. 沒有教律的開發流程
2. 不一致的介面元素
3. 對設計產出沒有信心
如果你正在被這三個問題困擾著的話,那麼設計系統Design System就是最佳的解決辦法。
那麼該如何著手開始做設計系統Design System呢?
我們先從概論的方式來認識什麼是設計系統吧!
【Atomic Design 原子設計方法論】
這是由於 Brad Forst 在 2013 年提出此設計概念:
靈感來自於他高中時期的化學實驗室,可以用肉眼看到的物體都是由——
原子(Atoms)組成
原子結合在一起形成分子(Molecures)
分子組合成相對更複雜的組織(Organisms)
於是Brad藉此概念應用在介面設計。
原子設計是一個設計方法論,運用在設計系統的脈絡上由五種不同的階段組合,創建一個有層次、計畫性的介面系統:
Atoms 原子
為網頁構成的基本元素,HTML的tags,例如標籤、輸入,或是一個按鈕,也可以為抽象的概念,例如字體、色調等
Molecules 分子
由元素構成的簡單UI物件
Organisms 組織
相對分子而言,較為複雜的構成物,由原子及分子所組成
Templates 模板
以頁面為基礎的架構,將以上元素進行排版 > wireframe
Pages 頁面
將實際內容(圖片、文章等)套件在特定模板 > 套圖與文案後形成一個完整個頁面
Nordic.design是一個設計者演講舞台,由多個共同理念的公司所組成,Airbnb也在其中,這段話就是出自於Airbnb的首席設計師 Karri Saarinen。
“由一個產品中心管控每個元件的品質,更改版本時也能夠一併更新,讓設計跟開發可以規模化。”
—Karri Saarinen
如果以實體產品形容的話,你可以把它想像成樂高(Lego)。
每個元件都是可以合成的模組,擁有千變萬化的樣式。
為什麼需要設計系統呢?
市場/平台逐趨成熟
由於數位產品的市場越來越飽和,大眾對產品的品質要求更高。
建立產品一致性
不但是在單一產品之內,包含在不同平台及裝置間的轉換,睇需建立產品的連貫性。
加速開發過程
由於有一個統一的設計控管系統,開發團隊可以隨時提取設計元素、同步更新,減少設計與開發反覆確認的過程。
擴張產品團隊
設計系統是由有清楚規範、一系列可重複利用的元素所組成,當產品模組化,可延展性就增加了。
專注於解決真正的問題
設計系統讓團隊的每個人可以加速構思到生產的過程,專注於大方向的用戶體驗。
但設計系統並不是適合每個團隊的,譬如像是炒短線商品的短期經營,若擁有設計系統可能會綁手綁腳的,不過能將設計系統的觀念放在心上,對於未來發展十分重要,下回將繼續介紹設計系統的執行面。